<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>靓淘网_购物车</title>
		<link rel="stylesheet" type="text/css" href="${ctx}/static/front/CSS/cart_style.css" />
	</head>

	<body>
		<div class="bg_color">
			<div class="top_center">
				<div class="left">
					<span class="wel">欢迎来到靓淘网</span>
				</div>
				<div class="right">
					<ul>
						<c:if test="${USER != null}">
						<li><a class="login" href="" target="_blank">Hi, 用户${USER.username}</a></li>
						<li><a class="login" onclick="remove()" target="_blank">注销</a></li>
						</c:if>
						<c:if test="${USER == null}">
							<li><a class="login" href="${ctx}/user/getLoginPage.shtml" target="_blank">请登录</a></li>
						</c:if>
						<!-- <li>
							<a class="login" href="login.html" target="_blank">请登录</a>
						</li> -->
						<li>
							<a href="register.html" target="_blank">快速注册</a>
						</li>
						<li>
							<a class="collect" href="">我的收藏</a>
						</li>
						<li>
							<a class="indent" href="">我的订单</a>
						</li>
						<li>
							<a class=phone href="">手机靓购</a>
						</li>
						<li>
							<a href="">我的积分</a>
						</li>
						<li>
							<a href="">我的评价</a>
						</li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="logo_center">
			<div class="left">
				<img class="logo_img" src="${ctx}/static/front/img/LOGO.png" />
				<span class="car_text">购物车</span>
			</div>
			<div class="right">
				<input class="car_input" type="text" />
				<input class="car_search" type="button" value="搜索" />
			</div>
		</div>
		<div class="title">
			<div class="title_top">
				<ul>
					<li>
						<a href="">全部商品</a>
					</li>
					<li>
						<a href="">降价商品</a>
					</li>
					<li>
						<a href="">库存紧张</a>
					</li>
				</ul>
				<p style="margin:0;padding-right: 10px; float: right;line-height: 40px;">配送至：<span style="border: 1px solid rgb(51,51,51);">山东省 青岛市 市南区 <img src="${ctx}/static/front/img/narrow.png"/></span></p>
			</div>
			<div class="title_center">
				<ul style="color: #666666;margin-top: 10px;margin-bottom: 10px;">
					<li style="margin-left: 16px;margin-right: 8px;">
						<!--最上面的那个CheckBox  -->
						<input type="checkbox" />
					</li>
					<li style="margin-left: 8px;margin-right: 38px;">全选</li>
					<li style="margin-left: 38px;margin-right: 168px;">商品</li>
					<li style="margin-left: 138px;margin-right: 58px;">单价</li>
					<li style="margin-left: 58px;margin-right: 58px;">数量</li>
					<li style="margin-left: 58px;margin-right: 58px;">小计</li>
					<li style="margin-left: 58px;margin-right: 36px;">操作</li>
				</ul>
			</div>
			<div class="title_bottom">
			<!--靓淘自营左面的checkbox  -->
			<img src="${ctx}/static/front/img/156.png" style="margin: 0px 142px 0px 11px; " />
			<img src="${ctx}/static/front/img/157.png" style="margin-left: 142px; " />
		</div>
		</div>
			<c:forEach items="${cartVO.cartItemVOList}" var="cartItemVO">
			<!--居中的框框  -->
			<div class="car_1">
			
			<!--购物车 购物项开始  -->
					<div class="car_2_bottom">
						<div class="car_con_1">
						<%-- <input onclick="updateCartItemStatus(${cartItemVO.product.id})" name="selectCheckbox" id="checkbox${cartItemVO.product.id}" type="checkbox" /> --%>
						<!-- 复选框开始 -->
						<c:if test="${cartItemVO.isChecked == 1}">
								<input checked="checked" onclick="updateCartItemStatus(${cartItemVO.product.id})" name="selectcheckbox" id="checkbox${cartItemVO.product.id}" type="checkbox" />
						</c:if>
						<c:if test="${cartItemVO.isChecked == 0}">
								<input onclick="updateCartItemStatus(${cartItemVO.product.id})" name="selectcheckbox" id="checkbox${cartItemVO.product.id}" type="checkbox" />
						</c:if>
						<!-- 复选框结束 -->
						</div>
						
						<div class="car_con_2">
							<img width="95px" height="95px" src="/img/${cartItemVO.product.mainImage}" />
						</div>
						<div class="car_con_3">
							<p class="p_title">${cartItemVO.product.name}</p>
							<img src="${ctx}/static/front/img/160.png" />
							<p class="p_seven">&nbsp;支持7天无理由退货</p>
							<img src="${ctx}/static/front/img/161.png" />
							<p class="p_select">&nbsp;选包装</p>
						</div>
						<ul class="car_ul">
							<li class="price">
								<span style="color: #CCCCCC; margin-bottom: 15px;line-height: 20px;">
									<del>
										¥ 两个亿<br />
									</del>
								</span>
								<span style="color: #666666;">
									¥ ${cartItemVO.product.price}
								</span>
							</li>
							<!--加  减 开始  -->
							<li class="num_select">
								<input onclick="updateAmount(${cartItemVO.product.id},${cartItemVO.product.price},-1)" class="car_ul_btn1" type="button" value="-" />
								<input id="amount${cartItemVO.product.id}" class="car_ul_text" type="text" placeholder="" value="${cartItemVO.amount}" />
								<input onclick="updateAmount(${cartItemVO.product.id},${cartItemVO.product.price},1)" class="car_ul_btn2" type="button" value="+" />
							</li>
							<!--加  减 结束  -->
							<li class="money">
									¥ 
								<!--单个商品的总价(数量 * 单价)  -->
								<span id="cartItemTotalPrice${cartItemVO.product.id}" style="color: #F41443;">
									${cartItemVO.product.price * cartItemVO.amount}
								</span>
							</li>
							<li class="delete">
								<img onclick="deleteById(${cartItemVO.product.id})" src="${ctx}/static/front/img/166.png" />
							</li>
						</ul>
					</div>
					<div class="clearfix"></div>
				</div>
				<!--购物车 购物项 结束  -->
			</c:forEach>
			<div class="total">
				<ul style="color: #666666;margin-top: 10px;margin-bottom: 10px;">
					<li style="margin-left: 16px;margin-right: 8px;">
					</li>
					<!--购物车全部总价      根据勾选刷新  -->
					<li style="margin-left: 610px;margin-right: 18px;">总金额（已免运费）：￥<span id = "totalPrice" style="color: #F41443;"></span></li>
				</ul>
			</div>
			<!--去支付 按钮  -->
			<div class="total" style="text-align:right">
				<!--onclick="getOrderPage()"  -->			
				<li class="total_right"><a onclick="getOrderPage(${cartItemVO.product.id})">立即结算</a></li>
			</div>
			<div class="sp">
			<div class="sp1">
				<p style="color: rgb(51,51,51);">品质保障</p>
				<p style="font-size: 12px; color: #808080;margin-top: 5px;">品质护航 购物无忧</p>
			</div>
			<div class="sp2">
				<p style="color: rgb(51,51,51);">品质保障</p>
				<p style="font-size: 12px; color: #808080;margin-top: 5px;">品质护航 购物无忧</p>
			</div>
			<div class="sp3">
				<p style="color: rgb(51,51,51);">品质保障</p>
				<p style="font-size: 12px; color: #808080;margin-top: 5px;">品质护航 购物无忧</p>
			</div>
			<div class="sp4">
				<p style="color: rgb(51,51,51);">品质保障</p>
				<p style="font-size: 12px; color: #808080;margin-top: 5px;">品质护航 购物无忧</p>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="more">
			<div class="mb1">
				<ul>
					<li>
						购物指南
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;免费注册
						</a>
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;开通支付宝
						</a>
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;支付宝充值
						</a>
					</li>
				</ul>
			</div>
			<div class="mb2">
				<ul>
					<li>
						品质保障
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;发票保障
						</a>
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;售后规则
						</a>
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;缺货赔付
						</a>
					</li>
				</ul>
			</div>
			<div class="mb3">
				<ul>
					<li>
						支付方式
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;快捷支付
						</a>
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;信用卡
						</a>
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;货到付款
						</a>
					</li>
				</ul>
			</div>
			<div class="mb4">
				<ul>
					<li>
						商家服务
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;商家入驻
						</a>
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;商家中心
						</a>
					</li>
					<li>
						<a href="">
							&nbsp;&nbsp;运营服务
						</a>
					</li>
				</ul>
			</div>
			<div class="mb5">
				<ul>
					<li>
						手机靓淘
					</li>
					<li>
						<img src="${ctx}/static/front/img/98.png"/>
					</li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="link">
			<ul>
				<li>
					<a href="">
						关于靓淘
					</a>
				</li>
				<li>
					<a href="">
						帮助中心
					</a>
				</li>
				<li>
					<a href="">
						开放平台
					</a>
				</li>
				<li>
					<a href="">
						诚聘精英
					</a>
				</li>
				<li>
					<a href="">
						联系我们
					</a>
				</li>
				<li>
					<a href="">
						网站合作
					</a>
				</li>
				<li>
					<a href="">
						法律声明及隐私政策
					</a>
				</li>
				<li>
					<a href="">
						知识产权
					</a>
				</li>
				<li>
					<a href="">
						廉政举报
					</a>
				</li>
				<li>
					<a href="">
						规则意见征集
					</a>
				</li>
			</ul>
		</div>
		<div class="copyright">
			COPYRIGHT 2010-2017 北京创锐文化传媒有限公司 JUMEI.COM 保留一切权利. 客服热线：400-123-888888<br /> 
			京公网安备 110101020011226|京ICP证111033号|食品流通许可证 SP1101051110165515（1-1）|营业执照
		</div>
		
		<!-- ---登录弹窗---------------------------------------------------------------- -->
			<!-- login弹出层 -->
			<div class="login" style="display:none" id="loginForm">
				<form id="login-form">
					<ul>
						<li class="login_title_1">
							<a href="">密码登录</a>
		
						</li>
						<li class="login_title_2">
							<a href="">扫码登录</a>
						</li>
						<li>
							<input id="username" name="username" class="login_user" type="text" placeholder="会员名/邮箱/手机号" />
							<input id="password" name="password" class="login_password" type="password" placeholder="密码" />
							<input class="login_btn" type="button" onclick="login()" value="登录" />
						</li>
						<li class="login_select">
							<a class="weibo" href="">微博登录</a>
							<a class="zhifubao" href="">支付宝登录</a><br />
						</li>
						<li class="renmenber_user">
							<input type="checkbox" value="remer_user" id="remer_user" />
							<label for="remer_user">记住用户名</label>
						</li>
						<li class="login_bottom">
							<a href="">忘记密码</a>
							<a href="">免费注册</a>
						</li>
					</ul>
				</form>
			</div>

		
		
		
	<!--加载用到的  -->	
	<script src="${ctx}/static/back/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx}/static/common/mylayer.js"></script>
	<script src="${ctx}/static/common/util.js"></script>
	<script src="${ctx}/static/lib/layui/layui.js"></script>
		
	<!--先写一个layer弹窗测试一下  -->
	<script type="text/javascript">
		layui.use(['layer'],function() {
			var layer = layui.layer;
			//layer.msg('hello world');
		});
		
		//在加载页面的时候就调用一下刷新购物车总价的方法
		$(function(){
			refreshTotalPrice();
		})
		
		function deleteById(productId) {
			layer.confirm("您确认要将本商品移除购物车么?",function (){
				$.ajax({
					url:"${ctx}/cart/deleteById.shtml",
					data:{"productId":productId},
					type:"POST",
					dataType:"json",
					success : function(resp) {
						if(resp.code == util.SUCCESS) {
							mylayer.success(resp.msg);
							//刷新购物车总价
							refreshTotalPrice();
							//这个地方写的是啥?
							$("#checkbox" + productId).parent().parent().parent().remove();
						}else{
							mylayer.errorMsg(resp.msg);
						}
					}
				});
			})
		}
		
		//点击事件: 商品数量加减  id="amount"
		function updateAmount(productId,price,num) {
			var amount = $("#amount" + productId).val();
			$.ajax({
				url:"${ctx}/cart/addOrUpdateCart.shtml",
				data:{"productId":productId,"amount":num,"isChecked":1},
				type:"POST",
				dataType:"json",
				success : function(resp) {
					if(resp.code == util.SUCCESS) {
						mylayer.success(resp.msg);
						amount = parseInt(amount) + num;
						$("#amount" + productId).val(amount);
						var totalPrice = amount * price;
						$("#cartItemTotalPrice" + productId).html(totalPrice);
						//刷新购物车总价
						refreshTotalPrice();
					}
				}
			});
		}
			
		//更改复选框选中状态,刷新购物车总金额
		 function updateCartItemStatus(productId){
			//把checked赋给 isChecked
			var isChecked = $("#checkbox" + productId).prop("checked");
			if(isChecked) {
				isChecked = 1;
			}else{
				isChecked = 0;
			}
			
			$.ajax({
				url:"${ctx}/cart/addOrUpdateCart.shtml",
				data:{"productId":productId,"isChecked":isChecked},
				type:"POST",
				dataType:"json",
				success : function (resp) {
					if(resp.code == util.SUCCESS) {
						mylayer.success(resp.msg);
						//刷新总价格
						refreshTotalPrice();
					}else{
						mylayer.errorMsg(resp.msg);
					}
				}
			}); 
		} 
	
		//更新购物车总价格
		function refreshTotalPrice() {
			var checkboxs = $("input[name = selectcheckbox]:checked");
			console.log(checkboxs);
			var totalPrice = 0.00;
			for(var i=0;i<checkboxs.length;i++) {
				//id = "checkbox..."
				var checkboxId = checkboxs[i].getAttribute("id");
				//...
				var id = checkboxId.substr("checkbox".length);
				//得到每一个购物项的总价
				var cartItemTotalPrice = $("#cartItemTotalPrice" + id).html();
				totalPrice += parseFloat(cartItemTotalPrice);
			}
			$("#totalPrice").html(totalPrice);
		}
		
		
		//在登录后把cookie中的值拿出来 ，放到数据库中。跳转到结算界面。
		function getOrderPage(){
			//先判定有没有登录
			var user = "${USER}";
			if(user == "") {
				layer.open({
					type:1,
					title:"登录",
					offset:"50px",
					area:['300px',"400px"],
					content:$('#loginForm')
				});
			} else{
				window.location.href = "${ctx}/cart/getplace.shtml";
			}
		}
		//login 是弹窗登录的点击事件
		function login() {
			var username = $("#username").val();
			var password = $("#password").val();
			//1.验证用户名不为空 
			if (util.isNull(username)) {
				mylayer.errorMsg("用户名不能为空");
				return;
			}
			//2.验证密码不能为空
			if (util.isNull(password)) {
				mylayer.errorMsg("密码不能为空");
				return;
			}
			//3.ajax 提交 ，携带ID过去
			$.ajax({
    			url:"${ctx}/user/login.shtml",
    			//$("#login_form").serialize()
    			data:{"username":username,"password":password},
    			type:"post",
    			dataType:"json",
    			success:function(resp) {
    				console.log(resp);
    				if(resp.code == util.SUCCESS){
    					mylayer.successUrl(resp.msg,"${ctx}/cart/getplace.shtml");
    				} else {
    					mylayer.errorMsg(resp.msg);
    				}
    			}
    		});
		}
		
		
	</script>
	
	  <script>
        	function remove() {
        		$.ajax({
        			url:"${ctx}/remove.shtml",
        			type:"POST",
        			success : function (resp) {
        				if(resp.code == util.SUCCESS) {
        					mylayer.successUrl(resp.msg,"${ctx}/user/getLoginPage.shtml");
        				}else{
        					mylayer.errorMsg(resp.msg);
        				}
        				
        			}
        		});
        	}
        </script>
        
	
		<style>
			
			/*------------------------------------------------*/
			
			.banner_center .login {
				width: 294px;
				height: 307px;
				margin-top: 95px;
				background: white;
				position: absolute;
				right: 80px;
				padding: 18px 30px 18px 30px;
			}
			
			.login {
				color: #333333;
			}
			
			.login_title_1 a {
				float: left;
				padding: 11px 44px 14px 44px;
				border-bottom: 2px solid #333333;
			}
			
			.login_title_2 a {
				float: left;
				padding: 11px 44px 14px 44px;
				border-bottom: 2px solid #333333;
			}
			
			.login_title_1 a:hover {
				color: #F41443;
				border-bottom: 2px solid #F41443;
			}
			
			.login_title_2 a:hover {
				color: #F41443;
				border-bottom: 2px solid #F41443;
			}
			
			.login_user {
				height: 40px;
				width: 250px;
				border: 1px solid #BFBFBF;
				margin-top: 30px;
				margin-bottom: 10px;
				background-image: url(../img/zhanghu.png);
				background-repeat: no-repeat;
				padding-left: 40px;
				background-position: 4% center;
				
			}
			
			.login_password {
				height: 40px;
				width: 250px;
				border: 1px solid #BFBFBF;
				margin-top: 10px;
				margin-bottom: 10px;
				background-image: url(../img/password.png);
				background-repeat: no-repeat;
				padding-left: 40px;
				background-position: 4% center;
			}
			
			.login_btn {
				height: 40px;
				width: 290px;
				background: #F41443;
				margin-top: 10px;
				margin-bottom: 15px;
				border-radius: 5px 5px 5px 5px;
				color: white;
			}
			
			.login_select {}
			
			.weibo {
				background-image: url(../img/weibo.png);
				background-repeat: no-repeat;
				padding-left: 18px;
				background-position: left center;
				margin-right: 15px;
			}
			
			.zhifubao {
				background-image: url(../img/zhifubao.png);
				background-repeat: no-repeat;
				padding-left: 18px;
				background-position: left center;
				margin-left: 15px;
			}
			
			.renmenber_user {
				line-height: 40px;
				float: left;
			}
			
			.renmenber_user input {
				float: left;
				margin-top: 15px;
			}
			
			.login_bottom {
				float: left;
				margin-top: 16px;
				margin-left: 63px;
			}
			
			
			/*---------------------*/
			
			.link {
				margin-top: 60px;
				height: 40px;
				background: white;
				text-align: center;
				line-height: 40px;
				border-bottom: 1px solid #BFBFBF;
				border-top: 1px solid #BFBFBF;
			}
			
			/*.link a {
				color: #;
			}*/
			
			.link li {
				margin-left: 5px;
				margin-right: 5px;
			}
			
			.copyright {
				height: 70px;
				background: white;
				text-align: center;
				color: #808080;
				padding-top: 7px;
			}
		</style>
	</body>

</html>